<template>
  <div id="hotcity">
    <my-header></my-header>
    <div class="head">
      <span><router-link to="/" class="head_a">首页 ></router-link></span>
      <span><router-link to="/wrindex" class="head_a">结婚商城 ></router-link></span>
      <span style="font-size: 12px">{{ city[0].city }}</span>
    </div>
    <div class="mid">
      <div class="block">
        <swiper></swiper>
      </div>
      <div class="mid_d">
        <div class="mid_d1">{{ city[0].city }}</div>
        <div class="mid_d2">{{ city[0].jianjie }}</div>
        <div class="mid_d3">
          <span class="mid_d3s">拍摄{{ city[0].mth }}</span
          ><span class="mid_d3s">平均花费</span
          ><span style="font-weight: bold; color: #f83244"
            >¥{{ city[0].cost }}</span
          >
        </div>
        <div class="mid_d4">
          {{ city[0].xq }}
        </div>
        <div class="mid_d5">热门景点</div>
        <div class="mid_d6">
          <div class="mid_d6p" @click="hotCity">
            {{ city[0].jingdian1 }}
          </div>
          <div class="mid_d6p" @click="hotCity2">
            {{ city[0].jingdian2 }}
          </div>
        </div>
        <div class="mid_d7">旅拍攻略</div>

        <div class="mid_d8">
          <span class="mid-d8a1" @click="hotCity3">{{
            showCity[0].title1
          }}</span>
          <span class="mid-d8a2" @click="hotCity3">查看更多></span>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
    <div class="foot" id="card">
      <el-tabs type="border-card">
        <el-tab-pane
          :label="`${item.title1}`"
          v-for="(item, i) in showCity"
          :key="i"
        >
          <div class="title_text">
            <h3 class="title_text_h">一、{{ item.title1 }}</h3>
            <span class="title_text_span">{{ item.text1 }} </span>
            <h3 id="dsn" class="title_text_h">{{ item.title2 }}</h3>
            <h3 class="title_text_h">{{ item.stitle1 }}</h3>
            <span class="title_text_span">{{ item.stext1 }} </span>
            <div class="title_text_img">
              <img :src="item.simg1" />
            </div>
            <h3 id="yz" class="title_text_h">{{ item.stitle2 }}</h3>
            <span class="title_text_span">{{ item.stext2 }} </span>
            <div class="title_text_img">
              <img :src="item.simg2" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
import Swiper from "./Swiper.vue";
export default {
  data() {
    return {
      city: [{ city: "" }],
      showCity: [{ title1: "" }],
      img: [],
      hot:[]
    };
  },
  mounted() {
    let rid = this.$route.query.rid;
    this.axios.get("/show_city?rid=" + rid).then((result) => {
      this.city = result.data;
      console.log(this.city);
    });
    this.axios.get("/show_bar?rid=" + rid).then((result) => {
      this.showCity = result.data;
      // console.log(this.showCity)
    });
    this.axios.get("/show").then((result) => {
      this.hot = result.data;
      // console.log(this.arr);
    });
  },
  methods: {
    hotCity() {
      // document.getElementById("dsn").scrollIntoView();
      window.scrollTo({
        top:920,
        behavior:"smooth"
      })
    },
    hotCity2() {
      // document.getElementById("yz").scrollIntoView();
      window.scrollTo({
        top:1580,
        behavior:"smooth"
      })
    },
    hotCity3() {
      document.getElementById("card").scrollIntoView();
    },
  },
  components: { Swiper },
};
</script>
<style scoped>
img:hover{
  opacity: 0.8;
}
.head_a {
  color: #999;
  text-decoration: none;
  font-size: 12px;
  line-height: 10px;
}
.head_a:hover {
  color: red;
}
.head_d {
  float: left;
}
.head {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.mid {
  width: 1200px;
  margin: 0 auto;
}
.mid > div:first-child {
  float: left;
}
.mid_d {
  float: right;
  width: 360px;
}
.mid_d1 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 6px;
}
.mid_d2,
.mid_d3,
.mid_d4 {
  font-size: 18px;
  font-weight: 400;
  color: #333;
  margin-bottom: 24px;
}
.mid_d5 {
  margin-bottom: 14px;
}
.mid_d7,
.mid_d8 {
  margin-bottom: 10px;
}
.mid_d3s {
  margin-left: 20px;
}
.mid_d3 {
  background-color: #fafafa;
  width: 380px;
  height: 64px;
  line-height: 64px;
}
.mid_d4 {
  line-height: 24px;
  font-size: 14px;
}
.mid_d5,
.mid_d7 {
  font-size: 18px;
  font-weight: bold;
}
.mid_d6p {
  font-size: 14px;
  background-color: #e2e6ea;
  border-radius: 24px;
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 2px 10px;
}
.mid_d6p:hover {
  background: #f83244;
  color: #fff;
  cursor: pointer;
}
.mid-d8a1,
.mid-d8a2 {
  text-decoration: none;
  color: #13acec;
  font-size: 14px;
  cursor: pointer;
  margin-right: 20px;
}
.mid-d8a2 {
  color: #333;
}
.mid-d8a1:hover {
  text-decoration: underline;
}
.mid-d8a2:hover {
  color: #f83244;
}
.foot {
  width: 1200px;
  margin: 0 auto;
}
.foot_title {
  margin-top: 50px;
  margin-bottom: 30px;
}
.foot_title1 {
  display: inline-block;
  background-color: #f5f5f5;
  padding: 18px 20px;
  border-radius: 6px;
  box-shadow: 0px 8px 28px rgba(0, 0, 0, 0.15);
  margin-right: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.foot_title1:hover {
  color: #f83244;
  cursor: pointer;
}
.title_text_h {
  font-size: 24px;
  margin-bottom: 20px;
  margin-top: 50px;
}
.title_text_span {
  font-size: 14px;
  margin-bottom: 50px;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.65);
}
.title_text_img {
  text-align: center;
  margin: 20px;
}
</style>